'use client';

import { useState } from 'react';
import { 
  Box, 
  Container, 
  Typography, 
  Grid, 
  Card, 
  CardContent, 
  CardActions, 
  Button, 
  Chip,
  TextField,
  InputAdornment,
  IconButton,
  Divider
} from '@mui/material';
import { useRouter } from 'next/navigation';
import { useTheme } from '@mui/material/styles';
import Navbar from '@/components/Navbar';
import SearchIcon from '@mui/icons-material/Search';
import CodeIcon from '@mui/icons-material/Code';
import StorageIcon from '@mui/icons-material/Storage';
import CloudIcon from '@mui/icons-material/Cloud';
import SecurityIcon from '@mui/icons-material/Security';
import LanguageIcon from '@mui/icons-material/Language';
import MobileFriendlyIcon from '@mui/icons-material/MobileFriendly';

// 预设的面试岗位数据
const interviewPositions = [
  {
    id: 'java-backend',
    title: 'Java 后端开发工程师',
    description: '针对Java后端开发技能的专业面试，涵盖Spring Boot、微服务架构、数据库设计等核心知识点',
    level: '中高级',
    icon: <StorageIcon fontSize="large" />,
    tags: ['Java', 'Spring', 'MySQL', '微服务']
  },
  {
    id: 'frontend',
    title: 'Web 前端开发工程师',
    description: '评估前端开发能力，包括React/Vue框架、JavaScript深度理解、性能优化等关键技能',
    level: '中级',
    icon: <LanguageIcon fontSize="large" />,
    tags: ['React', 'Vue', 'JavaScript', 'CSS']
  },
  {
    id: 'devops',
    title: 'DevOps/运维工程师',
    description: '检验CI/CD流程设计、容器化部署、监控告警体系搭建等运维核心能力',
    level: '高级',
    icon: <CloudIcon fontSize="large" />,
    tags: ['Docker', 'Kubernetes', 'CI/CD', 'Linux']
  },
  {
    id: 'python-backend',
    title: 'Python 后端开发工程师',
    description: '专注于Python开发技能评估，包括Django/Flask框架应用、数据处理和API设计',
    level: '中级',
    icon: <CodeIcon fontSize="large" />,
    tags: ['Python', 'Django', 'Flask', 'API开发']
  },
  {
    id: 'security',
    title: '网络安全工程师',
    description: '全面评估安全漏洞识别、渗透测试、安全防护方案设计等网络安全核心能力',
    level: '资深',
    icon: <SecurityIcon fontSize="large" />,
    tags: ['Web安全', '渗透测试', '安全审计', '加密技术']
  },
  {
    id: 'mobile',
    title: '移动端开发工程师',
    description: '针对Android/iOS原生开发或跨平台开发能力的综合评估，包含性能优化与用户体验',
    level: '中高级',
    icon: <MobileFriendlyIcon fontSize="large" />,
    tags: ['Android', 'iOS', 'React Native', 'Flutter']
  },
];

export default function InterviewPositions() {
  const router = useRouter();
  const theme = useTheme();
  const [searchTerm, setSearchTerm] = useState('');
  
  // 过滤岗位
  const filteredPositions = interviewPositions.filter(position => 
    position.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    position.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  return (
    <Container maxWidth="lg" sx={{ mt: 4, mb: 6 }}>
        {/* 页面标题 */}
        <Box sx={{ mb: 4, textAlign: 'center' }}>
          <Typography variant="h4" component="h1" gutterBottom>
            选择面试岗位
          </Typography>
          <Typography variant="body1" color="text.secondary">
            从以下预设岗位中选择一个进行AI模拟面试
          </Typography>
        </Box>

        {/* 搜索框 */}
        <Box sx={{ mb: 4, display: 'flex', justifyContent: 'center' }}>
          <TextField
            variant="outlined"
            placeholder="搜索岗位或技术关键词..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            sx={{ width: '100%', maxWidth: 600 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
            }}
          />
        </Box>

        <Divider sx={{ mb: 4 }} />

        {/* 岗位卡片列表 */}
        <Grid container spacing={3}>
          {filteredPositions.map((position) => (
            <Grid item xs={12} md={6} lg={4} key={position.id}>
              <Card 
                sx={{ 
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform 0.2s, box-shadow 0.2s',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: theme.shadows[4],
                  }
                }}
              >
                <CardContent sx={{ flexGrow: 1, pt: 3 }}>
                  <Box sx={{ display: 'flex', mb: 2 }}>
                    <Box sx={{ 
                      p: 1, 
                      borderRadius: '50%', 
                      bgcolor: theme.palette.primary.main + '20',
                      color: theme.palette.primary.main,
                      mr: 2
                    }}>
                      {position.icon}
                    </Box>
                    <Box>
                      <Typography variant="h6" component="h2" gutterBottom>
                        {position.title}
                      </Typography>
                      <Chip 
                        label={position.level} 
                        size="small" 
                        color="primary" 
                        variant="outlined"
                      />
                    </Box>
                  </Box>

                  <Typography variant="body2" color="text.secondary" paragraph sx={{ mb: 3 }}>
                    {position.description}
                  </Typography>

                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                    {position.tags.map((tag) => (
                      <Chip 
                        key={tag} 
                        label={tag} 
                        size="small"
                        sx={{ bgcolor: theme.palette.background.paper }}
                      />
                    ))}
                  </Box>
                </CardContent>
                <CardActions sx={{ p: 2, pt: 0 }}>
                  <Button 
                    variant="contained" 
                    fullWidth
                    onClick={() => router.push(`/job-assistant/interviews/${position.id}`)}
                  >
                    开始面试
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          ))}
        </Grid>

        {filteredPositions.length === 0 && (
          <Box sx={{ textAlign: 'center', py: 6 }}>
            <Typography variant="h6" color="text.secondary">
              没有找到匹配的岗位
            </Typography>
          </Box>
        )}
      </Container>
  );
} 